<template>
	<div id="cinema">
		<div class="nav">
			<span>全城<i class="fa fa-caret-down"></i></span>
			<span>品牌<i class="fa fa-caret-down"></i></span>
			<span>特色<i class="fa fa-caret-down"></i></span>
		</div>
		<div>
			<ul>
				<li v-for="(item,index) in cinemaList2" :key="index">
					<p>
						<span>{{item.name}}</span>
						<span>{{item.price}}</span>
						<span>元起</span>
					</p>
					<p>
						<span>{{item.address}}</span>
						<span>>{{item.distance}}km</span>
					</p>
					<p>
						<span>小吃</span>
						<span>折扣卡</span>
					</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: "CinemaName",
		mounted() {
			axios.get("/mock/api.json").
			then(
				response => {
					console.log(response.data)
					this.cinemaList2 = response.data.cinemaList2
				}
			).catch(
				error => {
					console.log(error)
				}
			)
		},
		data() {
			return {
				cinemaList2: [],
				// cinemaList: [{
				// 		"id": 1,
				// 		"name": "大地影院延庆金锣湾店",
				// 		"price": 38.5,
				// 		"address": "延庆区北街39号H座首层",
				// 		"distance": 100
				// 	}, {
				// 		"id": 2,
				// 		"name": "燕山影剧院",
				// 		"price": 37.5,
				// 		"address": "房山区燕山岗南路3号",
				// 		"distance": 120
				// 	},
				// 	{
				// 		"id": 3,
				// 		"name": "万达影城昌平保利光魔店",
				// 		"price": 37.9,
				// 		"address": "昌平区鼓楼南街佳莲时代广场四层",
				// 		"distance": 80
				// 	},
				// 	{
				// 		"id": 4,
				// 		"name": "门头沟影剧院",
				// 		"price": 30.9,
				// 		"address": "门头沟区新桥大街12号",
				// 		"distance": 110
				// 	}
				// ]
			}
		}
	}
</script>
<style scoped>
	#cinema {
		padding-top: 50px;
	}

	.nav span {
		width: 33%;
		display: inline-block;
		text-align: center;
		height: 45px;
		line-height: 45px;
	}

	.nav {
		border-bottom: 1px solid #ccc;
	}

	i {
		margin-left: 5px;

	}

	li {
		margin: 10px;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 120px;
	}

	ul li>p:nth-of-type(1)>span:nth-of-type(2) {
		color: #E54847;
		margin: 0 5px;
	}

	ul li>p:nth-of-type(1)>span:nth-of-type(3) {
		color: #E54847;
		font-size: 12px;
	}

	ul li>p:nth-of-type(2)>span {
		font-size: 12px;
		color: #999;
	}

	ul li>p:nth-of-type(2)>span:nth-of-type(2) {
		float: right;
	}

	ul li>p:nth-of-type(3)>span {
		border: 1px solid #f90;
		color: #f90;
	}

	ul li>p:nth-of-type(3) {
		margin: 10px 0;
	}
</style>
